<template>
  <view class="page">
<view :style="{height: systemBarHeight + 'rpx'}"></view>
		<view class="page-hd" :style="{ height: menuBotton.height  + 'rpx', lineHeight: menuBotton.height  + 'rpx',  marginTop:  menuBotton.top + 'rpx', marginBottom: '20rpx' }">学习服务</view>
    <view class="swipper">
      <image
        src="https://cloud-minapp-46950.cloud.ifanrusercontent.com/1srqLXzz70NPfOCJ.png"
        alt=""
      />
    </view>

    <view v-if="false" class="recommend">
      <view class="recommend-hd">
        <div class="title">
          <text class="label">好课推荐</text>
          <text class="desc">每天5分钟，轻松获得学习证明</text>
        </div>
        <view class="more" style="color: #12b858">
          查看更多
          <wd-icon name="arrow-right" size="22px"></wd-icon>
        </view>
      </view>
      <view class="recommend-list">
        <view class="recommend-item">
          <text class="recommend-item-title">医院陪护(初级)</text>
          <text class="recommend-item-type">陪护知识</text>
          <button>
            去报名
            <img src="../../../static/icons/add.svg" style="width: 28rpx; height: 28rpx" />
          </button>
        </view>
        <view class="recommend-item">
          <text class="recommend-item-title">医院陪护(高级)</text>
          <text class="recommend-item-type">陪护知识</text>
          <button>
            去报名
            <img src="../../../static/icons/add.svg" style="width: 28rpx; height: 28rpx" />
          </button>
        </view>
      </view>
    </view>

    <view class="purchase">
      <view class="purchase-hd">
        <text class="label">已参与学习</text>
        <view class="more" style="color: #12b858">
          查看更多
          <wd-icon name="arrow-right" size="22rpx"></wd-icon>
        </view>
      </view>
      <view class="purchase-list">
        <view v-for="item in courseList" :key="item.courseId" class="purchase-item">
          <image :src="item.courseCover" />
          <text class="purchase-item-title">{{ item.courseName }}</text>
          <button @click="handleGo(item.courseId)">
            去学习 <wd-icon name="arrow-right" size="24rpx"></wd-icon>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import usePage from "@/hooks/usePage.js"
import useLoading from "@/hooks/useLoading.js"
import { joinCourseList } from "@/api/train/course"

const { loading, setLoading } = useLoading()

const { systemBarHeight, menuBotton } = usePage()
	
const current = ref(20)

const courseList = ref([])

const getJoinCourseList =async () => {
	setLoading(true)
	try {
		const { data } = await joinCourseList({
			pageNum: 1,
			pageSize: 20,
		})
    courseList.value = data.list
	} finally {
		setLoading(false)
	}
}

const handleGo = (courseId) => {
  uni.navigateTo({
    url: `/pages/student/course/index?courseId=${courseId}`
  })
}

onShow(() => {
  getJoinCourseList()
})
</script>

<style scoped lang="scss">
.page {
  padding: 0 24rpx;
  background-color: #f5f6fa;
  &-hd {
    font-family: PingFang SC;
    font-size: 36rpx;
    font-variation-settings: 'opsz' auto;
    font-weight: 500;
    line-height: normal;
    color: #1a1a1a;
  }

  .swipper {
    height: 324rpx;
    margin: 0 auto;
    margin-top: 16rpx;
    border-radius: 24rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .recommend {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    padding: 24rpx 32rpx 32rpx 32rpx;
    margin-top: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;

    .recommend-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .label {
        display: flex;
        align-items: flex-end;
        font-family: PingFang SC;
        font-size: 34rpx;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0em;
      }

      .desc {
        display: flex;
        align-items: flex-end;
        margin-top: 8rpx;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        line-height: normal;
        color: #8c8c8c;
        letter-spacing: 0em;
      }

      .title {
        display: flex;
        flex-direction: column;
      }

      .more {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: normal;
        line-height: normal;
      }
    }

    &-list {
      display: flex;
      gap: 24rpx;
      flex-wrap: wrap;
    }

    .recommend-item {
      position: relative;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      max-width: 308rpx;
      height: 200rpx;
      padding: 24rpx 24rpx 24rpx 24rpx;
      overflow: hidden;
      background: linear-gradient(180deg, #12b858 0%, #84e8ae 100%);
      border-radius: 16rpx;
      opacity: 1;

      &-title {
        height: 42rpx;
        font-family: PingFang SC;
        font-size: 30rpx;
        font-weight: 500;
        line-height: normal;
        color: #ffffff;
      }

      &-type {
        display: flex;
        align-items: flex-end;
        margin-top: 14rpx;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        line-height: normal;
        color: #ffffff;
        letter-spacing: 0em;
      }

      button {
        display: flex;
        gap: 12rpx;
        align-items: center;
        justify-content: center;
        width: 128rpx;
        height: 50rpx;
        padding: 0;
        margin-top: 34rpx;
        margin-left: 0;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        line-height: normal;
        color: #12b858;
        text-align: center;
        white-space: nowrap;
        background: #ffffff;
        border-radius: 8rpx;
      }

      &::after {
        position: absolute;
        top: 44rpx;
        left: 182rpx;
        width: 136rpx;
        height: 360rpx;
        content: '';
        background: url(../../../static/images/doctor.png) no-repeat 0 0;
        background-size: 100%;
      }
    }
  }

  .purchase {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    padding: 24rpx 32rpx 32rpx 32rpx;
    margin-top: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;

    .purchase-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .label {
        display: flex;
        align-items: flex-end;
        font-family: PingFang SC;
        font-size: 34rpx;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0em;
      }

      .more {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: normal;
        line-height: normal;
      }
    }

    &-list {
      display: flex;
      gap: 24rpx;
      flex-wrap: wrap;
    }

    .purchase-item {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      gap: 16rpx;
      align-items: center;
      padding: 32rpx 24rpx 32rpx 32rpx;

      background: #f4f5f9;
      border-color: #12b858;
      border-style: solid;
      /* 主色 */
      border-width: 0px 0px 0px 6rpx;
      border-radius: 16rpx;

      &-title {
        display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
        flex: 1;
        margin: 0 32rpx 0 24rpx;
        overflow: hidden; /* 隐藏超出范围的内容 */
        font-family: PingFang SC;
        font-size: 30rpx;
        font-weight: 500;
        line-height: normal;
        color: #1a1a1a;
        text-overflow: ellipsis; /* 使用省略号 */
        letter-spacing: 0em;
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 2; /* 限制显示两行 */
      }

      :deep(.wd-circle) {
        .wd-circle__text {
          font-size: 16rpx;
        }
      }

      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 48rpx;
      }

      button {
        display: flex;
        flex-direction: row;
        gap: 2rpx;
        align-items: center;
        justify-content: center;
        width: 128rpx;
        height: 56rpx;

        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        line-height: 32rpx;
        color: #ffffff;
        text-align: center;
        white-space: nowrap;
        background: #12b858;
        border: none;
        border-radius: 8rpx;
        opacity: 1;
      }
    }
  }
}
</style>
